<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
    />
    <title>大众点评</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/element.css" />

    <link href="./css/blog-detail.css" rel="stylesheet" />
    <link href="./css/main.css" rel="stylesheet" />

    <style type="text/css">
      .header {
        position: relative;
      }

      .foot-view span {
        font-size: 12px;
      }

      .liked {
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="header-back-btn" @click="goBack">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="header-title"></div>
        <div class="header-share">...</div>
      </div>
      <div
        style="
          height: calc(100% - 6% - 60px);
          overflow-y: scroll;
          overflow-x: hidden;
        "
      >
        <div
          class="blog-info-box"
          ref="swiper"
          @touchstart="moveStart"
          @touchmove="moving"
          @touchend="moveEnd"
        >
          <div class="swiper-item" v-for="(img, i) in blog.images" :key="i">
            <img :src="img" alt="" style="width: 100%" height="100%" />
          </div>
        </div>
        <div class="basic">
          <div class="basic-icon" @click="toOtherInfo">
            <img :src="blog.icon || '/imgs/icons/default-icon.png'" alt="" />
          </div>
          <div class="basic-info">
            <div class="name">{{blog.name}}</div>
            <span class="time">营业时间：{{blog.createTime}}</span>
          </div>
          <div style="width: 20%">
            <div
              class="logout-btn"
              @click="follow"
              v-show="!user || user.id !== blog.userId "
            >
              {{followed ? '取消关注' : '关注'}}
            </div>
          </div>
        </div>
        <div class="blog-text" v-html="blog.content"></div>
        <div class="shop-basic">
          <div class="shop-icon">
            <img :src="shop.image" alt="" />
          </div>
          <div style="width: 80%">
            <div class="name">{{shop.name}}</div>
            <div>
              <el-rate v-model="shop.score/10"> </el-rate>
            </div>
            <div class="shop-avg">￥{{shop.avgPrice}}/人</div>
          </div>
        </div>
        <div class="zan-box">
          <div>
            <svg
              t="1646634642977"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2187"
              width="20"
              height="20"
            >
              <path
                d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                p-id="2188"
                :fill="blog.isLike ? '#ff6633' : '#82848a'"
              ></path>
            </svg>
          </div>
          <div class="zan-list">
            <div class="user-icon-mini" v-for="u in likes" :key="u.id">
              <img :src="u.icon || '/imgs/icons/default-icon.png'" alt="" />
            </div>
            <div
              style="margin-left: 10px; text-align: center; line-height: 24px"
            >
              {{blog.liked}}人点赞
            </div>
          </div>
        </div>
        <div class="blog-divider"></div>

        <!--      评论列表-->
        <div class="blog-comments">
          <div class="comments-head">
            <div>网友评价 <span>{{this.blog.comments}}</span></div>
            <div><i class="el-icon-arrow-right"></i></div>
          </div>
          <div class="comment-list">
            <div
              class="comment-box"
              v-for="item in comments"
              :key="item.id"
              style="border-bottom: 1px solid #ccc; padding: 0px 0"
            >
              <div class="comment-info">
                <div class="comment-user">
                  <el-image
                    :src="item.icon"
                    style="
                      width: 50px;
                      height: 50px;
                      border-radius: 50%;
                      margin-bottom: 10px;
                    "
                  ></el-image>
                  <span>{{ item.nickName }}：</span>
                </div>
                <div class="comment-content">
                  <span>{{ item.content }}</span>
                  <div class="comment-create-time">
                    <i class="el-icon-time"></i>
                    {{item.createTime}}
                  </div>
                </div>
              </div>

              <div v-if="item.children.length">
                <div
                  v-for="subItem in item.children"
                  :key="subItem.id"
                  style="background-color: #f0f0f0; padding: 5px 20px"
                >
                  <!--          回复列表-->
                  <div
                    style="font-size: 14px; padding: 5px 0; line-height: 25px"
                  >
                    <div>
                      <b style="color: #3a8ee6" v-if="subItem.pnickName"
                        >@{{ subItem.pnickName }}</b
                      >
                    </div>
                    <div style="padding-left: 5px">
                      <b>{{ subItem.nickName }}：</b>
                      <span>{{ subItem.content }}</span>
                    </div>

                    <div
                      style="
                        display: flex;
                        line-height: 20px;
                        margin-top: 5px;
                        padding-left: 5px;
                      "
                    >
                      <div style="width: 200px; line-height: 40px">
                        <i class="el-icon-time"></i
                        ><span style="margin-left: 5px"
                          >{{ subItem.createTime }}</span
                        >
                      </div>
                      <div style="text-align: right">
                        <el-button
                          style="margin-left: 5px"
                          type="text"
                          @click="handleReply(subItem.id)"
                          >回复
                        </el-button>
                        <el-button
                          type="text"
                          style="color: red"
                          @click="del(subItem.id)"
                          v-if="curUserId === subItem.userId"
                          >删除
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <!--  内容-->
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="blog-divider"></div>
      </div>
      <div class="foot">
        <div class="foot-box">
          <div class="foot-view" @click="addLike()">
            <svg
              t="1646634642977"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2187"
              width="26"
              height="26"
            >
              <path
                d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                p-id="2188"
                :fill="blog.isLike ? '#ff6633' : '#82848a'"
              ></path>
            </svg>
            <span :class="{liked: blog.isLike}">{{blog.liked}}</span>
          </div>
        </div>
        <div style="width: 40%"></div>
        <!--从这里开始新增-->
        <div class="foot-box">
          <div class="foot-view" @click="handleReply()">
            <i class="el-icon-chat-square"></i>
          </div>
        </div>
        <!--    <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>-->
        <el-dialog title="评论" :visible.sync="dialogFormVisible" width="80%">
          <el-form label-width="80px" size="small">
            <el-form-item label="内容">
              <el-input
                type="textarea"
                v-model="commentForm.content"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false" size="small"
              >取 消</el-button
            >
            <el-button type="primary" @click="save" size="small"
              >确 定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/element.js"></script>
    <script src="./js/common.js"></script>
    <script>
      let each = function (ary, callback) {
        for (let i = 0, l = ary.length; i < l; i++) {
          if (callback(ary[i], i) === false) break;
        }
      };
      const app = new Vue({
        el: "#app",
        data: {
          util,
          blog: {},
          shop: {},
          likes: [],
          user: "", // 登录用户
          followed: false, // 是否关注了
          _width: 0,
          duration: 300,
          container: null,
          items: [],
          active: 0,
          start: {
            x: 0,
            y: 0,
          },
          move: {
            x: 0,
            y: 0,
          },
          sensitivity: 60,
          resistance: 0.3,

          curUserId: localStorage.getItem("userId")
            ? JSON.parse(localStorage.getItem("userId"))
            : {},
          commentForm: {},
          dialogFormVisible: false,
          comments: [],
          answerId: null,
        },
        created() {
          let id = util.getUrlParam("id");
          this.queryBlogById(id);

          this.loadComment(id);
          // this.queryLoginUser();
          console.log("id" + id);
          console.log("curUserIderererer" + this.curUserId);
        },

        methods: {
          init() {
            // 获得父容器节点
            this.container = this.$refs.swiper;
            // 获得所有的子节点
            this.items = this.container.querySelectorAll(".swiper-item");
            this.updateItemWidth();
            this.setTransform();
            this.setTransition("none");
          },

          ////新增
          handleReply(aid) {
            this.commentForm = { parentId: aid, answerId: aid };
            this.dialogFormVisible = true;
          },
          async save() {
            console.log("成功");
            if (!this.user.id) {
              this.$message.warning("请登录后操作");
              return;
            }
            this.commentForm.blogId = this.blog.id;
            if (this.commentForm.contentReply) {
              //如果有值的话，因为后台接收的是content
              this.commentForm.content = this.commentForm.contentReply;
            }
            await axios
              .post("/comment", this.commentForm)
              .then(
                this.$message.success("评论成功"),
                (this.commentForm = {}), // 初始化评论对象内容
                (this.dialogFormVisible = false),
                this.loadComment(this.blog.id),
                console.log("成功到这里")
              )
              .catch(this.$message.error);
          },
          del(id) {
            axios
              .delete("/comment/" + id)
              .then((res) => {
                console.log("shanchu" + id);
                this.$message.success("删除成功");
                this.loadComment(this.blog.id);
              })
              .catch((err) => {
                this.$message.error("删除失败");
              });
          },

          async loadComment(id) {
            // try {
            //   const res = await axios.get("/comment/tree/" + id);
            //   this.comments = res.data;
            // } catch (error) {
            //   this.$message.error("加载评论失败");
            // }
            this.comments = [
              {
                icon: "/imgs/icons/user5-icon.png",
                nickName: "小梨",
                createTime: "2024-06-20 15:42:53",
                content: "真的非常好吃！！！而且价格也不贵，强烈推荐！！！",
                id: 1,
                userId: "1",
                children: [
                  {
                    pnickName: "小梨",
                    nickName: "我是小白啊",
                    content: "姐妹有什么推荐的菜吗",
                    createTime: "2024-06-22 08:22:42",
                  },
                  {
                    pnickName: "我是小白啊",
                    nickName: "小梨",
                    content: "蟹炒年糕，非常棒！！！",
                    createTime: "2024-06-23 12:52:23",
                  },
                ],
              },
            ];
          },
          /////////////////////////////////////////////////////////////区分
          goBack() {
            history.back();
          },
          toOtherInfo() {
            if (this.blog.userId === this.user.id) {
              location.href = "/info.html";
            } else {
              location.href = "/other-info.html?id=" + this.blog.userId;
            }
          },
          queryBlogById(id) {
            // axios
            //   .get("/blog/" + id)
            //   .then(({ data }) => {
            //     data.images = data.images.split(",");
            //     this.blog = data;
            //     this.$nextTick(this.init);
            //     this.queryShopById(data.shopId);
            //     this.queryLikeList(id);
            //     this.queryLoginUser();
            //   })
            //   .catch(this.$message.error);
            this.blog = {
              images: [
                "/imgs/detail/shopping1.jpg",
                "/imgs/detail/shopping2.jpg",
              ],
              name: "湘粤美食饭店",
              createTime: "09:00 - 24:00",
              content: "湖南美食 | 粤菜 | 免费停车 | 新鲜海鲜 | 可自带酒水",
              isLike: true,
              liked: 45,
              comments: "",
            };
            this.$nextTick(this.init);
            this.queryShopById();
            this.queryLikeList();
          },
          queryShopById() {
            // axios
            //   .get("/shop/" + shopId)
            //   .then(({ data }) => {
            //     data.image = data.images.split(",")[0];
            //     this.shop = data;
            //   })
            //   .catch(this.$message.error);
            this.shop = {
              image: "/imgs/icons/kkjtbcr.jpg",
              name: "味道非常好，螃蟹非常新鲜，下次还来",
              score: 50,
              avgPrice: 89,
            };
          },
          queryLikeList(id) {
            // axios
            //   .get("/blog/likes/" + id)
            //   .then(({ data }) => (this.likes = data))
            //   .catch(this.$message.error);
            this.likes = [
              {
                icon: "/imgs/icons/kkjtbcr.jpg",
              },
              {
                icon: "/imgs/icons/user5-icon.png",
              },
              {
                icon: "/imgs/icons/c4a465df56304d04bf8e1f74ac15760e.jpg",
              },
              {
                icon: "/imgs/icons/7b9a04fe180945979187bc15bb305543.jpg",
              },
              {
                icon: "/imgs/icons/icon1.jpg",
              },
            ];
          },
          addLike() {
            // axios
            //   .put("/blog/like/" + this.blog.id)
            //   .then(({ data }) => {
            //     axios
            //       .get("/blog/" + this.blog.id)
            //       .then(({ data }) => {
            //         data.images = data.images.split(",");
            //         this.blog = data;
            //         this.queryLikeList(this.blog.id);
            //       })
            //       .catch(this.$message.error);
            //   })
            //   .catch((err) => {
            //     this.$message.error(err);
            //   });
          },
          isFollowed() {
            axios
              .get("/follow/or/not/" + this.blog.userId)
              .then(({ data }) => (this.followed = data))
              .catch(this.$message.error);
          },
          follow() {
            // axios
            //   .put("/follow/" + this.blog.userId + "/" + !this.followed)
            //   .then(() => {
            //     this.$message.success(this.followed ? "已取消关注" : "已关注");
            //     this.followed = !this.followed;
            //   })
            //   .catch(this.$message.error);
          },
          formatTime(b) {
            return (
              b.getFullYear() +
              "年" +
              (b.getMonth() + 1) +
              "月" +
              b.getDate() +
              "日 "
            );
          },
          formatMinutes(m) {
            if (m < 10) m = "0" + m;
            return m;
          },
          queryLoginUser() {
            // 查询用户信息
            axios
              .get("/user/me")
              .then(({ data }) => {
                // 保存用户
                this.user = data;
                if (this.user.id !== this.blog.userId) {
                  console.log(
                    "queryLoginUser" + this.user.id + "_" + this.blog.userId
                  );
                  this.curUserId = this.user.id;

                  this.isFollowed();
                }
                // this.curUserId = JSON.parse(sessionStorage.getItem("userId")) ? JSON.parse(sessionStorage.getItem("userId")) : "";
                console.log("cur" + this.curUserId);
              })
              .catch(console.log);
          },
          // 获取父容器宽度，并且更新所有的子节点宽度，因为我们默认所有子节点的宽高等于父节点的宽高
          updateItemWidth() {
            this._width =
              this.container.offsetWidth ||
              document.documentElement.offsetWidth;
          },
          // 根据当前活动子项的下标计算各个子项的X轴位置
          // 计算公式(子项的下标 - 当前活动下标) * 子项宽度 + 偏移(手指移动距离)；
          setTransform(offset) {
            offset = offset || 0;
            each(this.items, (item, i) => {
              let distance = (i - this.active) * this._width + offset;
              let transform = `translate3d(${distance}px, 0, 0)`;
              item.style.webkitTransform = transform;
              item.style.transform = transform;
            });
          },
          // 给每一个子项添加transition过度动画
          setTransition(duration) {
            duration = duration || this.duration;
            duration =
              typeof duration === "number" ? duration + "ms" : duration;
            each(this.items, (item) => {
              item.style.webkitTransition = duration;
              item.style.transition = duration;
            });
          },
          moveStart(e) {
            console.log("moveStart");
            this.start.x = e.changedTouches[0].pageX;
            this.start.y = e.changedTouches[0].pageY;
            this.setTransition("none");
          },
          moving(e) {
            console.log("moving");
            e.preventDefault();
            e.stopPropagation();
            let distanceX = e.changedTouches[0].pageX - this.start.x;
            let distanceY = e.changedTouches[0].pageY - this.start.y;
            if (Math.abs(distanceX) > Math.abs(distanceY)) {
              this.isMoving = true;
              this.move.x = this.start.x + distanceX;
              this.move.y = this.start.y + distanceY;
              // 当活动子项为第一项且手指向右滑动或者活动项为最后一项切向左滑动的时候，添加阻力，形成一个拉弹簧的效果
              if (
                (this.active === 0 && distanceX > 0) ||
                (this.active === this.items.length - 1 && distanceX < 0)
              ) {
                distanceX = distanceX * this.resistance;
              }
              this.setTransform(distanceX);
            }
          },
          moveEnd(e) {
            console.log("moveEnd");
            if (this.isMoving) {
              e.preventDefault();
              e.stopPropagation();
              let distance = this.move.x - this.start.x;
              if (Math.abs(distance) > this.sensitivity) {
                if (distance < 0) {
                  this.next();
                } else {
                  this.prev();
                }
              } else {
                this.back();
              }
              this.reset();
              this.isMoving = false;
            }
          },
          next() {
            let index = this.active + 1;
            // 运用动画切换到指定下标的子项
            this.go(index);
          },
          prev() {
            let index = this.active - 1;
            // 运用动画切换到指定下标的子项
            this.go(index);
          },
          reset() {
            this.start.x = 0;
            this.start.y = 0;
            this.move.x = 0;
            this.move.y = 0;
          },
          back() {
            this.setTransition();
            this.setTransform();
          },
          destroy() {
            this.setTransition("none");
          },
          // 运用动画切换到指定下标的子项
          go(index) {
            this.active = index;
            if (this.active < 0) {
              this.active = 0;
            } else if (this.active > this.items.length - 1) {
              this.active = this.items.length - 1;
            }
            this.$emit("change", this.active);
            this.setTransition();
            this.setTransform();
          },
        },
      });
    </script>
  </body>
</html>
